import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import IconFont from '../IconFont';

export function SortableItem({ id, children, style, handle }) {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
    } = useSortable({ id: id });

    const styles = {
        transform: CSS.Transform.toString(transform),
        transition,
    };

    return (
        <div ref={setNodeRef} style={{ ...styles, ...style, position: "relative" }} {...attributes}  {...(handle ? {} : listeners)}>
            {children}
            {handle ? <div {...listeners} className='center' style={{ position: "absolute", left: 12, bottom: 12, width: 28, height: 28, borderRadius: 8, boxShadow: "0 0 4px #666", cursor: "move" }}>
                <IconFont type='icon-move'></IconFont>
            </div> : null}

        </div>
    );
}